<template>
	<view class="centerBox">
		<view class="centerBox1">
			<!-- 主体 -->
			<view class="boxCenter">
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						所属项目
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.projectName || '-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						班组名称
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.teamName || '-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						排产名称
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.schedulingName || '-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						排产编号
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.schedulingId || '-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						计划生产日期
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.schedulingPlanrunDate?datainfo.schedulingPlanrunDate.slice(0,10):'-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						计划交付日期
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.schedulingDeliveryDate?datainfo.schedulingDeliveryDate.slice(0,10):'-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						备注
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.remark || '-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						创建人
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.createBy || '-'}}
					</view>
				</view>
				<view class="boxCenter-item">
					<view class="boxCenter-item-left">
						创建时间
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.createTime || '-'}}
					</view>
				</view>
				<!-- <view class="boxCenter-item">
					<view class="boxCenter-item-left">
						更新人
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.updateBy}}
					</view>
				</view>
				<view class="boxCenter-item" style="border: none;">
					<view class="boxCenter-item-left">
						更新时间
					</view>
					<view class="boxCenter-item-right">
						{{datainfo.updateTime}}
					</view>
				</view> -->
			</view>
			<!-- 颜色块 -->
			<view style="background-color: #F2F6FC;height: 28rpx;width: 100%;"></view>
			<view style="padding: 0 28rpx;" v-if="componentList.length">
				<!-- 清单明细 -->
				<view class="centerBox1" style="padding-top: 28rpx;">
					<!-- 标题 -->
					<view class="centerBox1-title">构件信息</view>
					<view v-for="(item,index) in componentList" :key="item.id">
						<view class="items">
							<view class="titlesd">
								<view style="font-size: 30rpx;color: #303133;" class="centeritem">
									<view class="lefts">
										{{item.componentCode}}
									</view>
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">构件型号：</span>{{item.componentModel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">构件类型：</span>{{item.componentType}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">楼栋：</span>{{item.buildingName}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">楼层：</span>{{item.layer}}F
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">计划生产日期：</span>{{item.planProductionDate}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">计划交付日期：</span>{{item.planDeliveryDate}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">模具型号：</span>{{item.moldModel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">模具编号：</span>{{item.moldCode}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">模台名称：</span>{{item.moldTableName}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">轴线：</span>{{item.axis}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">班组名称：</span>{{item.teamName}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">班组类型：</span>{{item.teamTypeDictLabel}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 颜色块 -->
			<view style="background-color: #F2F6FC;height: 28rpx;width: 100%;"></view>
			<view style="padding: 0 28rpx;" v-if="materialList.length">
				<!-- 清单明细 -->
				<view class="centerBox1" style="padding-top: 28rpx;">
					<!-- 标题 -->
					<view class="centerBox1-title">物料信息</view>
					<view v-for="(item,index) in materialList" :key="item.id">
						<view class="items">
							<view class="titlesd">
								<view style="font-size: 30rpx;color: #303133;" class="centeritem">
									<view class="lefts">
										{{item.materialCode}}
									</view>
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">物料分类：</span>{{item.materialClassDictLabel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">物料型号：</span>{{item.modelNumberDictLabel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">物料名称：</span>{{item.materialNameDictLabel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">规格：</span>{{item.specificationsDictLabel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">单位：</span>{{item.unitDictLabel}}
								</view>
								<view class="fs28" style="margin-top: 15rpx;color: #303133;">
									<span style="color: #606266;">数量：</span>{{item.quantity}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datainfo: {},
				drawing_type_info: [],
				item: {},
				teamList: [],
				projectList: [],
				materialList:[],
				componentList:[]
			}
		},
		async onLoad({schedulingId}) {
			await this.$api.teampage({}).then(res => {
				this.teamList = res.rows
			})
			await this.$api.projectApproval({}).then(res => {
				this.projectList = res.rows
			})

			this.$api.getCollectDetail({schedulingId}).then(res => {
				console.log(res);
				this.datainfo = res.data.pdSchedulings[0]
				this.materialList = res.data.materialList
				this.componentList = res.data.pageList
				this.datainfo.teamName = this.teamList.find(item =>{
					return item.id = this.datainfo.teamId
				}).teamName
				this.datainfo.projectName = this.projectList.find(item =>{
					return item.id = this.datainfo.projectId
				}).name
			}).catch(err=>{
				console.log(err);
			})
		},
		methods: {
			// 打开文件
			/* openfile(v) {
				uni.showLoading({
					title: '加载中'
				});
				let data = v.filePath
				let url = adminApi + data
				const encodedURL = url.replace(/#/g, '%');
				uni.downloadFile({
					url: encodedURL,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								uni.hideLoading();
							},
							fail: function() {
								uni.hideLoading();
							}
						});
					},
					fail: function() {
						uni.hideLoading();
					}
				});
			}, */
			// 请求字典
			dicts(type = 'materia_name') {
				return new Promise((reslve, reject) => {
					this.$api.dict({
						pageNum: 1,
						pageSize: 999999,
						dictType: type
					}).then(res => {
						reslve(res)
					})
				})
			},

		},
		async created() {
			//获取物资类型
			await this.dicts('drawing_type_info').then(res => {
				this.drawing_type_info = res.rows
			})
		}
	}
</script>

<style scoped lang="scss">
	.centeritem {
		@include justify-space-between();
	}

	.items {
		// height: 188rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0rpx;
		border-bottom: 1px solid #eaeef5;

		.titles-min {
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #858689;
		}

		.titlesd {
			color: #191919;
			font-size: 28rpx;
			width: 100%;
			.lefts{
				font-weight: 600;
			}
		}
	}

	.btn {
		position: fixed;
		width: 100vw;
		// padding: 0rpx 20rpx;
		bottom: 20rpx;
	}

	.centerBox {
		height: 100vh;
		background-color: #F2F6FC;

		.centerBox1 {
			background-color: #fff;
			// padding: 0rpx 28rpx 0rpx 28rpx;

			.boxCenter {
				padding: 0 28rpx;
				.boxCenter-item {
					padding: 28rpx 0rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					border-bottom: 1px solid #eaeef5;

					.boxCenter-item-left {
						color: #606266;
						width: 40vw;
					}

					.boxCenter-item-right {
						color: #303133;
						text-align: right;
						width: 450rpx;
					}
				}
			}

			.centerBox1-title {
				font-size: 28rpx;
				color: #303133;
				position: relative;
				margin-left: 15rpx;

				&::before {
					// 小圆点在这里
					content: '';
					position: absolute;
					background-color: #2289FF;
					left: -20rpx;
					top: -5rpx;
					display: inline-block; // 此句为css样式展示重点🏁
					width: 12rpx;
					height: 38rpx;
				}
			}
		}
	}
</style>
